<template>
  <view :style="{'marginTop':topHeight+'px'}" class="content" style="box-sizing: border-box">
    <view style="background-color: var(--bg-center-color);border-radius: 20rpx;min-height: 550rpx;">
      <view class="content-title">
        <view class="content-title-left">系统标签</view>
        <view class="content-title-right">
          <view class="content-title-phone">*系统自动化规则标签生成</view>
        </view>
      </view>
      <view class="line-split"></view>
      <view style="padding: 20rpx;box-sizing: border-box">
        <view class="flex-row flex-jus-bet flex-ali-cen flex-wrap container"
              style="height: 100%;align-content: flex-start;">
          <view v-if="labelListSystem.length>0" class="content-from"
                :style="{'color': item.color, 'border': '1px solid ' + item.color}"
                v-for="(item,index) in labelListSystem" :key="index">
            {{ item.label_name }}
          </view>
          <view v-else style="color: var(--grey-text);font-size: 24rpx;margin: auto;line-height: 380rpx;">
            该客户还未拥有自动化标签
          </view>
        </view>
      </view>
    </view>

    <view
        style="background-color: var(--bg-center-color);border-radius: 20rpx;min-height: 550rpx;margin-top: 30rpx;">
      <view class="content-title">
        <view class="content-title-left">自定义标签</view>
        <view class="content-title-right">
          <view class="content-title-phone">*用户自定义输入标签</view>
        </view>
      </view>
      <view class="line-split"></view>
      <view style="padding: 20rpx;">
        <view class="flex-row flex-jus-bet flex-ali-cen flex-wrap"
              style="height: 100%;align-content: flex-start;">
          <view v-if="labelListCustom.length>0" class="content-from"
                :style="{'color': item.color, 'border': '1px solid ' + item.color}"
                v-for="(item,index) in labelListCustom" :key="index">{{ item.label_name }}
          </view>
          <view v-else style="color: var(--grey-text);font-size: 24rpx;margin: auto;line-height: 380rpx;">
            该客户还未拥有自定义标签
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    topHeight: {
      type: [String, Number],
      require: true,
      default: 0
    },
    customId: {
      type: [String, Number],
      require: true,
      default: 0
    }
  },
  data() {
    return {
      labelListCustom: [],
      labelListSystem: [],
      colorList: [
        '#e19696', '#d3a661', '#b7b772', '#94b76f', '#74b774', '#80b7b4', '#7eaab7', '#8096b7', '#8480b7',
        '#b78691', '#b79788', '#b7a1a4', '#b76b40', '#3f89b7', '#4e40b7', '#923cb7', '#b75a2b'
      ],
      shopIndex: this.$commonJs.getChooseShopIndex(),
      shopList: this.$commonJs.getShopList(),
    }
  },
  mounted() {
    this.getLabelList()
  },
  methods: {
    getLabelList() {
      const self = this
      const params = {
        id: self.customId
      }
      self.$commonJs.queryCache('/app/admin/customLabel', params, {
        before() {
        },
        success(res) {
          try {
            const {
              code,
              data,
              msg,
              server_ip
            } = res
            if (data.hasOwnProperty('custom')) {
              self.labelListCustom = data.custom.map(item => ({
                ...item,
                color: self.getRandomColor()
              }));
            }
            if (data.hasOwnProperty('system')) {
              self.labelListSystem = data.system.map(item => ({
                ...item,
                color: self.getRandomColor()
              }));
            }
          } catch (error) {
            //TODO handle the exception
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.shopList[self.shopIndex].shop_id})
    },
    getRandomColor() {
      return this.colorList[Math.floor(Math.random() * this.colorList.length)]
    }
  }
}
</script>

<style scoped lang="scss">
.content-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 20rpx;
  height: 70rpx;
  line-height: 70rpx;
  align-items: center;

  .content-title-left {
    font-size: 28rpx;
    font-weight: 600;
    color: var(--white-text);
  }

  .content-title-right {
    display: flex;
    flex-direction: row;

    .content-title-phone {
      font-size: 24rpx;
      color: var(--grey-text);
    }
  }
}

.content-from {
  height: 58rpx;
  padding: 0 10rpx;
  text-align: center;
  line-height: 58rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  width: calc((100% - 40rpx) / 3);
  white-space: nowrap;
  overflow: hidden;
  margin: 0 20rpx 20rpx 0;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.content-from:nth-child(3n) {
  margin-right: 0;
  /* 每行最后一个元素去掉右边距 */
}

/* 使用多个伪元素占位补全最后一行 */
.container::after {
  content: '';
  flex-grow: 1;
  /* 自动占用剩余空间 */
  width: calc((100% - 40rpx) / 3);
  /* 与 .item 宽度一致 */
  margin: 0;
  /* 无需间距 */
  visibility: hidden;
  /* 不可见 */
}

.flex {
  display: flex;
  align-items: center;

  &-row {
    flex-direction: row;
  }

  &-wrap {
    flex-wrap: wrap;
  }

  &-nowrap {
    flex-wrap: nowrap;
  }

  &-col {
    flex-direction: column;
  }

  &-1 {
    flex: 1;
  }

  &-shrink {
    flex-shrink: 0;
  }

  &-jus-cen {
    justify-content: center;
  }

  &-jus-bet {
    justify-content: space-between;
  }

  &-jus-aro {
    justify-content: space-around;
  }

  &-jus-eve {
    justify-content: space-evenly;
  }

  &-jus-self-end {
    justify-self: end;
  }

  &-ali-cen {
    align-items: center;
  }

  &-ali-sta {
    align-items: flex-start;
  }

  &-ali-end {
    align-items: flex-end;
  }
}

.content {
  padding: 30rpx 30rpx 60rpx 30rpx;
  position: absolute;
  width: 100vw;
}
</style>